console.log('-------');
// DOM: document object model
// 每个标签都是一个对象，这个对象提供了操作标签的多个属性，方法；

// 查找标签：
// 1) document:整个html文档
// 2) element:元素
// 3) tagName:标签名

// 1.1根据标签名查找标签：
// 返回值类型  HTMLCollection(类似数组)
var h1s = document.getElementsByTagName('h1');
console.log(h1s);

var h1 = h1s[0];
console.log(h1);

// 1.2根据id查找标签：
var div1 = document.getElementById('result');
console.log(div1);
// 1.3根据class查找标签：
var divs = document.getElementsByClassName('container');
console.log(divs);
// 1.4根据selector（选择器）查找标签：

// 查找到满足选择器的第一个标签：
var div2 = document.querySelector('div:nth-child(1)'); 
console.log(div2);
// 查找到满足选择器的所有标签：
var div2s = document.querySelectorAll('div');
console.log(div2s);


// innerHTML:标签内部的html; innerText:标签内部的文本;
// attributes：标签的属性; style:标签的样式;
// className:标签样式类名称，类似：'big color';  
// classList:标签的样式类列表；类似:['big' 'color'];

// parentElement:父标签; children:所有子标签;
// previousElementSibling:前面的兄弟标签;
// nextElementSibling:后面的兄弟标签;

// clientWidth/height:content+padding(内容+内边距)
// offsetWidth/height:content+padding+border(内容+内边距+边框)
// scrollWidth:滚动内容的宽度+滚动条;
// scrollHight:滚动内容的高度+滚动条的高度;
// scrollTop:竖直方向的滚动距离;
// scrollLeft:水平方向滚动的距离;


// 控制台的普通输出：
// console.log()
// 控制台的详情输出：
// console.dir(h1);
// 控制台的输出错误：
// console.error('----====');
// 控制台的输出警告：
// console.warn(jsjsjs);


// 2,标签操作
// 2.1)修改标签的内容：
// div1.innerHTML = '<a href="http://www.baidu.com">百度</a>'
div1.innerText = '<a href="http://www.baidu.com">百度</a>'

// 2.2)标签的属性操作：
var img = document.querySelector('img');
// 设置属性：
img.setAttribute('src','http://n.sinaimg.cn/sinacn/20170426/3492-fyepses8257103.jpg');
// 获取属性：
var src = img.getAttribute('src');
console.log(src);
// 删除属性：
// img.removeAttribute('src');

// class样式类操作：
// 添加一个样式类：
img.classList.add('big');
// 删除一个样式类：
// img.classList.remove('big');

// style样式操作：
img.style.border = '10px solid red';
img.style.borderRadius = '15px';

// 2.3)添加标签：
var ul = document.querySelector('ul');
// 新建一个标签对象
var li =document.createElement('li');
li.innerHTML = '05';
// append:添加
ul.appendChild(li);
// 在哪个标签前面插入标签：
// parameter1（li）:新标签
// para2（ul.children[1]）：位置说明；定位标签
ul.insertBefore(li,ul.children[1]);


// 2.4)删除标签：
ul.removeChild(ul.children[0]);
